<template>
	<nut-popup 
		v-model:visible="visible"
		safe-area-inset-bottom
		:close-on-click-overlay="false"
		:custom-style="customStyle"
	>
		<view class="modal">
			<view class="content">
				<view class="title">更多功能</view>
				<view class="bar-box">
					<navigator url="/pages/order/list/index" class="item-bar">
						<image class="icon" src="/src/static/mine/order-icon.png" mode="aspectFill"></image>
						<view class="label">我的订单</view>
						<nut-icon name="rect-right" custom-color="#BFBFBF"></nut-icon>
					</navigator>
					<navigator url="/pages/mine/receiveRecord/index" class="item-bar">
						<image class="icon" src="/src/static/mine/pickUp-icon.png" mode="aspectFill"></image>
						<view class="label">领取记录</view>
						<nut-icon name="rect-right" custom-color="#BFBFBF"></nut-icon>
					</navigator>
					<navigator class="item-bar" @click="toIndex">
						<image class="icon" src="/src/static/mine/tour-icon.png" mode="aspectFill"></image>
						<view class="label">游览历史</view>
						<nut-icon name="rect-right" custom-color="#BFBFBF"></nut-icon>
					</navigator>
					<navigator open-type="switchTab" url="/pages/index/index" class="item-bar">
						<image class="icon" src="/src/static/mine/home-icon.png" mode="aspectFill"></image>
						<view class="label">回到首页</view>
						<nut-icon name="rect-right" custom-color="#BFBFBF"></nut-icon>
					</navigator>
				</view>
			</view>
			<view class="close-btn" @click="visible = false">
				<nut-icon name="close-little" size="14" custom-color="#666"></nut-icon>
			</view>
		</view>
	</nut-popup>
</template>

<script setup>
import storage from '@/utils/storage';

const customStyle = {
	backgroundColor: 'transparent'
}

const visible = defineModel('visible', {
	default: false
})

const toIndex = () => {
	storage().set('index_tabValue', '2')
	uni.switchTab({
		url: '/pages/index/index'
	})
}
</script>
<style lang="scss" scoped>
.modal {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 96rpx;
	margin-top: 100rpx;
	.content {
		width: 692rpx;
        border-radius: 30rpx;
        background-color: #fff;
		.title {
			 margin: 44rpx 70rpx 0;
			 font-size: 32rpx;
			 font-weight: 700;
			 text-align: center;
		}
		.bar-box {
			padding: 20rpx 0;
			.item-bar {
				display: flex;
				align-items: center;
				height: 120rpx;
				padding: 0 60rpx 0 76rpx;
				.icon {
					width: 54rpx;
					height: 54rpx;
					margin-right: 30rpx;
				}
				.label {
					flex: 1;
					font-size: 28rpx;
				}
			}
			.complaint {
				text-align: center;
				color: #737373;
				margin-bottom: 30rpx;
			}
		}
	}
	.close-btn {
		display: inline-block;
		width: 62rpx;
		height: 62rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background-color: #fff;
	}
}
</style>